<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>选择车票</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .header {
        background-color: #fff;
        position: relative;
        z-index: 2000;
    }

    .wrapper {
        width: 1200px;
        padding: 0 5px;
        margin: 0 auto;
    }

    .header-cont {
        height: 80px;
        box-sizing: border-box;
    }

    .logo {
        float: left;
        margin: 15px 0 0 0;
    }

    .logo img {
        width: 200px;
        height: 50px;
    }

    .header-right {
        float: right;
        margin: 24px 0 0 0;
        width: 940px;
        height: 40px;
        background: image-set(url("http://localhost:8080/sellticket_war_exploded/forward/img/train.png") 1x, url("http://localhost:8080/sellticket_war_exploded/forward/img/train@2x.png") 2x);
        background-repeat: no-repeat;
        position: relative;
        z-index: 2000;
    }

    .header-search {
        width: 380px;
        float: left;
        margin: 5px 0 5px 90px;
    }

    .header-menu {
        float: right;
        padding-right: 10px;
    }

    .search-bd {
        width: 350px;
        position: relative;
    }

    .search-input {
        width: 100%;
        float: left;
        height: 30px;
        line-height: 20px;
        border: 1px solid #dedede;
        padding: 4px 10px;
        background-color: #fff;
        color: #333;
        outline: none;
        font-size: 14px;
        box-sizing: border-box;
    }

    .search-btn {
        float: left;
        width: 30px;
        color: #FFFFFF;
        height: 30px;
        line-height: 30px;
        background-color: #5696DE;
        border: none;
        text-align: center;
        cursor: pointer;
        outline: none;
    }

    .search-btn img {
        width: 16px;
        height: 16px;
    }

    .header-menu li {
        float: left;
        margin-left: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        position: relative;
        list-style: none;
        color: #3b99fc;
        font-size: 12px;
    }

    .menu-line {
        color: #acd1f9;
    }

    .menu-login a {
        color: #333;
        text-decoration: none;
        background-color: transparent;
        margin-left: 10px;
    }

    .nav-box {
        height: 40px;
        background-color: #3b99fc;
    }

    .nav {
        width: 1190px;
        margin: 0 auto;
        height: 40px;
        position: relative;
        z-index: 1900;
    }

    .nav li {
        list-style: none;
        width: 145px;
        float: left;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }

    .active {
        background-color: #2676e3;
        color: #fff;
    }

    .tablehead {
        height: 26px;
        width: 20px;
        background-color: #6899FF;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 20px;
        font-weight: 400;
    }

    .tablecontent {
        text-align: center;
    }
</style>

<body>
<div class="content">
    <div class="header">
        <div class="wrapper">
            <div class="header-cont">
                <h1 class="logo">
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/title.png" alt="">
                </h1>
                <div class="header-right">
                    <div class="header-search">
                        <div class="search-bd">
                            <input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
                        </div>
                        <a href="javascript:;" class="search-btn">
                            <img src="http://localhost:8080/sellticket_war_exploded/forward/img/search.png" alt="">
                        </a>
                    </div>
                    <ul class="header-menu">
                        <li>无障碍</li>
                        <li class="menu-line">|</li>
                        <li>爱心版</li>
                        <li class="menu-line">|</li>
                        <li>English</li>
                        <li class="menu-line">|</li>
                        <li>我的12306</li>
                        <li class="menu-line">|</li>
                        <c:if test="${resUser == null}">
                        <li class="menu-login">
                            <a href="http://localhost:8080/sellticket_war_exploded/forward/login.jsp">登录</a>
                            <a href="http://localhost:8080/sellticket_war_exploded/forward/signup.jsp">注册</a>
                        </li>
                        </c:if>
                        <c:if test="${resUser != null}">
                            <li class="menu-login">
                                <a href="http://localhost:8080/sellticket_war_exploded/forward/user.jsp">用户：${resUser.user_name}</a>
                            </li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-box">
            <ul class="nav">
                <li>首页</li>
                <li class="active">车票</li>
                <li>团购服务</li>
                <li>会员服务</li>
                <li>站车服务</li>
                <li>商旅服务</li>
                <li>出现指南</li>
                <li>信息查询</li>
            </ul>
        </div>
    </div>
    <div class="container">

        <div id="needsbar"
             style="position: absolute;left: 3%;top:160px;border:3px solid #3b99fc;width: 90%;height: 80px;padding: 20px;font-size: 20px;">
            出发地：${departure.station_name} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            到达地：${terminal.station_name}<br><br>
            出发日期：${train_date}
        </div>
        <table id="choices" style="position: absolute; left: 3%; top: 313px; width: 93%; height: 46px;" border="1">
            <tr id="tableheadtr" style="background-color: #3b99fc">
                <td height="40" class="tablehead">车次号</td>
                <td class="tablehead">出发时刻</td>
                <td class="tablehead">商务座余票</td>
                <td class="tablehead">一等座余票</td>
                <td class="tablehead">二等座余票</td>
            </tr>
            <c:forEach var="ticket" items="${ticketList}">
            <tr>
                <td class="tablecontent">${ticket.train_no}</td>
                <td class="tablecontent">${ticket.train_time}</td>
                <td class="tablecontent">
                    <a href="http://localhost:8080/sellticket_war_exploded/ticket/getTicketByIdForBuy?train_id=${ticket.train_id}&type=business">${ticket.business_num}</a>
                </td>
                <td class="tablecontent">
                    <a href="http://localhost:8080/sellticket_war_exploded/ticket/getTicketByIdForBuy?train_id=${ticket.train_id}&type=first">${ticket.first_num}</a>
                </td>
                <td class="tablecontent">
                    <a href="http://localhost:8080/sellticket_war_exploded/ticket/getTicketByIdForBuy?train_id=${ticket.train_id}&type=second">${ticket.second_num}</a>
                </td>
            </tr>
            </c:forEach>
        </table>
    </div>
</div>

</body>

</html>
